<script setup lang="ts" name="Home">
import { ref, watch } from "vue";
import { $t, $locale } from "@/locales";

const list = ref<string[]>([]);

const updateList = () => {
  list.value = [
    `✔ ⚡ ${$t("home.details.businessAnalysis")}`,
    `✔ 🍕 ${$t("home.details.salesManagement")}`,
    `✔ ✨ ${$t("home.details.productManagement")}`,
    `✔ 🌀 ${$t("home.details.userOperations")}`,
    `✔ 🍍 ${$t("home.details.businessReport")}`,
    `✔ 🌓 ${$t("home.details.industryConsulting")}`,
    `✔ 🧀 ${$t("home.details.aiTools")}`,
    `✔ 🎀 ${$t("home.details.personnelManagement")}`,
    // `✔ ${$t("home.details.icon")}`,
    // `✔ ${$t("home.details.vw")}`,
    // `✔ ${$t("home.details.axios")}`,
    // `✔ ${$t("home.details.gzip")}`,
    // `✔ ${$t("home.details.mock")}`,
    // `✔ ${$t("home.details.eslint")}`,
    // `✔ ${$t("home.details.loading")}`,
    // `✔ ${$t("home.details.eruda")}`
  ];
};
updateList();
// 监听语言变化，更新列表
watch(() => $locale.value, updateList);
</script>

<template>
  <div class="home-content px-[12px]">
    <img
      class="block w-[120px] mx-auto mb-[20px] pt-[30px]"
      alt="Vue logo"
      src="~@/assets/jewelry/favicon.png"
    />
<!--    <div class="pl-[12px] border-l-[3px] border-[color:#41b883]">-->
<!--      <a-->
<!--        class="flex items-center"-->
<!--        href="https://github.com/yulimchen/vue3-h5-template"-->
<!--        target="_blank"-->
<!--      >-->
<!--        <svg-icon class="text-[20px] mr-[8px]" name="github" />-->
<!--        <h3 class="font-bold text-[18px] my-[4px]">Vue3-h5-template</h3>-->
<!--        <svg-icon class="text-[12px] ml-[5px]" name="link" />-->
<!--      </a>-->
<!--    </div>-->
<!--    <div-->
<!--      class="text-[14px] py-[2px] px-[10px] rounded-[4px] bg-[var(&#45;&#45;color-block-background)] mt-[14px]"-->
<!--    >-->
<!--      <p class="my-[14px] leading-[24px]">🌱 {{ $t("home.description") }}</p>-->
<!--    </div>-->

    <div class="home">
      <van-cell v-for="(item, idx) in list" :key="idx" :title="item" />
    </div>
  </div>
</template>
